import React, { useEffect } from 'react';
import { useState } from 'react'
import {
    notification,
    Button,
    Form,
    Input,
    Select,
} from 'antd';
import * as server from '../../../api/studentManagement';
import Style from '../HLstyle/StudentManagEditor.css';
import { useHistory, Link } from "react-router-dom";
import service from '../../../utils/service';

function StudentManagEditor(props) {
    const history = useHistory();
    // 数据的状态
    const [studentdatas, setStudentdatas] = useState([]);
    console.log(props.location.state.id)
    const [componentSize, setComponentSize] = useState('default');
    // 调用Form的useForm()钩子函数
    const [form] = Form.useForm();
    // 回显数据
    useEffect(() => {
        // 回显表单数据
        form.setFieldsValue(props.location.state.id)
        // 请求所有的数据
        server.student_demo().then((res) => {
            // 把拿到的数据设置给studentdatas的状态
            setStudentdatas(res.data)
        })
    }, [])
    // 事件
    const onFinish = (values) => {
        console.log('Success:', values);
        // 提交的时候发请求改变原数据
        // console.log(studentdatas)
        // 把获取表单的值替换到数据中
        server.student_repair(values).then((res) => {
            if (res.status === 200) {
                notification.open({
                    message: '修改成功！',
                    description: '',
                    onClick: () => {
                        console.log('');
                    },
                })
                history.push("/Main/studentManagement");
            }


        })

    };
    const tocancel = () => {
        history.push("/Main/homePage")
        console.log('222');

    }
    return (
        <div className={Style.studentManagEditor} >
            <div className={Style.top}>编辑</div>
            <div className={Style.content}>
                <div className={Style.contentinfor}>
                    <Form
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 14 }}
                        layout="horizontal"
                        initialValues={{ size: componentSize }}
                        style={{ maxWidth: 600 }}
                        form={form}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="id"
                            name='id'
                            hidden
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="学生姓名"
                            name='name'
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item label="学籍号" name="num">
                            <Input />
                        </Form.Item>
                        <Form.Item label="年级" style={{ marginBottom: 0 }}>
                            <Form.Item name="grand" >
                                <Select
                                    defaultValue={props.location.state.id.grand}
                                    style={{ width: 120 }}
                                    name="class"
                                    options={[
                                        { value: '全部', label: '全部' },
                                        { value: '一年级', label: '一年级' },
                                        { value: '二年级', label: '二年级' },
                                        { value: '三年级', label: '三年级' },
                                        { value: '四年级', label: '四年级' },
                                        { value: '五年级', label: '五年级' },
                                        { value: '六年级', label: '六年级' },
                                    ]}>
                                </Select>

                            </Form.Item>
                            <Form.Item name="class" >
                                <Select
                                    style={{ width: 120, marginLeft: 10 }}
                                    defaultValue={props.location.state.id.class}
                                    options={[
                                        { value: '全部', label: '全部' },
                                        { value: '1班', label: '1班' },
                                        { value: '2班', label: '2班' },
                                        { value: '3班', label: '3班' },
                                        { value: '4班', label: '4班' },
                                        { value: '5班', label: '5班' },
                                        { value: '6班', label: '6班' },
                                    ]}>
                                </Select>
                            </Form.Item>
                        </Form.Item>
                        <Form.Item label="性别" name="sex">
                            <Input />
                        </Form.Item>
                        <Form.Item label="民族" name="nation">
                            <Input />
                        </Form.Item>
                        <Form.Item label="监护人姓名" name="name1">
                            <Input />
                        </Form.Item>
                        <Form.Item label="监护人手机号" name="phone1">
                            <Input />
                        </Form.Item>
                        <Form.Item label="" style={{}}>
                            <Button type="primary" htmlType="submit">提交</Button>
                        </Form.Item>
                        <Button style={{ marginLeft: 20 }} onCilck={tocancel} > 取消</Button>

                    </Form>
                </div>
            </div>
        </div>
    )
}

export default StudentManagEditor
